{extend name="layout/default" /}

{block name="content"}
<div class="content">
    <div class="content-block">
        <div class="user-top">
            <div class="user-info">
                <h2>{$user.nickname}</h2>
                <p>已服务1天</p>
                <p>服务周期：90天</p>
            </div>
            <div class="user-avatar">
                <img src="{$user.avatar}" alt="">
            </div>
        </div>
    </div>
    <div class="list-block">
        <ul>
            <li id="picker">
                <a href="" class="item-link item-content">
                    <div class="item-inner">
                        <div class="item-title">
                            阅读提醒设置
                            <p id="picker-time">每天：00点：00分</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="{:url('user/teacher')}" class="item-link item-content">
                    <div class="item-inner">
                        <div class="item-title">
                            我的老师
                            <p>查看老师微信联系方式</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="{:url('article/show', ['id' => 6])}" class="item-link item-content">
                    <div class="item-inner">
                        <div class="item-title">
                            常见问题
                            <p>使用方法、打卡、奖励活动</p>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="http://g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>

<script type="text/javascript">

$$("#picker").picker({
    toolbarTemplate: '<header class="bar bar-nav">\
    <button class="button button-link pull-left close-picker close-picker">取消</button>\
    <button class="button button-link pull-right close-picker">确定</button>\
    </header>',
    cols: [
        {
            textAlign: 'center',
            values: ['00点', '01点', '02点', '03点', '04点', '05点', '06点', '07点', '08点', '09点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点']
        },
        {
            textAlign: 'center',
            values: ['00分', '30分']
        }
    ],
    formatValue: function (picker, value, displayValue){
        $('#picker-time').html('每天：' + displayValue);
    }
});
</script>
{/block}
